<template>
	<view class="topic-box">
		<view class="topic-top-content">
			<!-- <view class="topic-title" :style="`background: url(${detailInfo.pic}) no-repeat;background-size: 100%;`">
			</view> -->
			<swiper class="swiper" circular :autoplay="autoplay" :interval="interval" :duration="duration" @change="changeBanner">
				<swiper-item v-for="(item,i) in detailInfo.picList" :key="i">
					<view class="swiper-item" @click="$Foundation.previewImgs(detailInfo.picList,i)">
						<image class="img" :src="item" mode="aspectFit"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="numbox" v-if="detailInfo.picList">{{current+1}}/{{detailInfo.picList.length}}</view>
			<view class="topic-content">
				<view class="topic-title-c">
					#{{detailInfo.name}}#
				</view>
				<!-- <view class="topic-desc" v-if="detailInfo.details&&detailInfo.details.length>68">
					<view class="short" v-if="showShort">{{detailInfo.shortDetails}}...<view class="yellow" @click="showShort = false">更多<uni-icons type="bottom" size="16" color="#FD9618"></uni-icons></view></view>
					<view class="long" v-else>{{detailInfo.details}}<view class="yellow" @click="showShort = true">收起<uni-icons type="top" size="16" color="#FD9618"></uni-icons></view></view>
				</view> -->
				<view class="topic-desc">
					<u-parse :content="detailInfo.details"></u-parse>
				</view>
				<view class="topic-title-p">{{onLookers || 0}}人参与 · {{detailInfo.thumbs || 0}}人点赞</view>
				<view class="topic-tab">
					<view :class="{'active':tabNav== index}" class="view" v-for="(item,index) in tabList" @click="checkTab(index)">{{item}}</view>
				</view>
				<view class="uni-topic-list">
				<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
				<view class="topic-list" v-for="(item, i) in list" :key="i">
					<view class="topic-list-p" @click.native.stop="goCenter(item)">
						<image :src="$imgUrl + '/services/person-icon.png'" class="topic-list-person" mode=""></image>
						<view class="view">
							<span class="list-f-1">{{item.userName}}</span>
							<span class="list-f-2">{{$filters.formatTimeAgo(item.createTime)}}</span>
						</view>
					</view>
					<view class="main" @click="goTopic(item)">
						<view class="topic-list-desc">
							{{item.content}}
						</view>
						<view class="topic-list-img1" v-if="item.images.length < 4">
							<image :src="$filters.oosImgZip(img)" class="image" v-for="(img, idx) in item.images" :key="'img'+idx" mode=""></image>
						</view>
						<view class="topic-list-img2" v-if="item.images.length > 3&&item.images.length <= 6">
							<image :src="$filters.oosImgZip(img)" class="image" v-for="(img, idx) in item.images" :key="'img'+idx" mode=""></image>
						</view>
						<view class="topic-list-img3" v-if="item.images.length > 6">
							<image :src="$filters.oosImgZip(img)" class="image" v-for="(img, idx) in item.images" :key="'img'+idx" mode=""></image>
						</view>
					</view>
					<view class="topic-detail">
						<view class="view">{{$filters.formatDate(item.createTime)}}</view>
						<view class="topic-zan view" v-if="item.flag" @click.native.stop="getTopicUpvote(item)">
							<image class="image" :src="$imgUrl + '/personal/zan-icon.png'" mode=""></image>{{item.thumbs}}
						</view>
						<view class="topic-zan yellow view" v-else>
							<image class="image" :src="$imgUrl + '/personal/zan-yellow-icon.png'" mode=""></image>{{item.thumbs}}
						</view>
					</view>
				</view>
				</mescroll-body>
				</view>
			</view>
		</view>
		<view class="takeTopic disabled" v-if="detailInfo.topicStatus==1">话题未开始</view>
		<view class="takeTopic" v-if="detailInfo.topicStatus==2" @click="takeTopic">参与话题</view>
		<view class="takeTopic disabled" v-if="detailInfo.topicStatus==3">话题已结束</view>
	</view>
</template>
<script setup lang="ts">
	import {ref} from 'vue'
	import { onLoad,onShow } from "@dcloudio/uni-app"
	import { topicsInfo,topicsGetPage,topicsUpvote } from '@/common/API/member'
	import { onPageScroll, onReachBottom } from "@dcloudio/uni-app"
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
	const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom)
	
	const autoplay = ref(true)
	const interval = ref(2000)
	const duration = ref(500)
	const onLookers = ref(0)
	const curId = ref()
	onLoad((options)=>{
		onLookers.value = options.onLookers
		curId.value = options.id
		getDetail(options.id)
	})
	const tabList = ['精选','最新']
	const tabNav = ref(0)
	const checkTab = (index) => {
		tabNav.value = index
		resetScroll()
		console.log(tabNav.value)
	}
	
	const current = ref(0)
	const changeBanner = async(e)=>{
		current.value = e.detail.current
	}
	
	// 话题详情
	const detailInfo = ref({})
	// const showShort = ref(false)
	const getDetail = async (id)=>{
		let res = await topicsInfo(id)
		res.picList = res.images.split(',')
		// if(res.details&&res.details.length>68){
		// 	res.shortDetails = res.details.slice(0,68)
		// 	showShort.value = true
		// }
		detailInfo.value = res
	}
	
	// 跟帖列表
	const list = ref<any>([])
	const upCallback = async (mescroll)=>{
		let data = {
			topicId: Number(curId.value),
			type: tabNav.value==0?2:1,
			pageNo: mescroll.num,
			pageSize: mescroll.size,
			creator: uni.getStorageSync('userId')
		}
		let res = await topicsGetPage(data)
		if(res.list&&res.list.length){
			res.list.map(item=>{
				item.images = item.images?item.images.split(','):[]
			})
		}
		let curPageData = res.list || [];
		let curPageLen = curPageData.length;
		if(mescroll.num == 1) list.value = [];
		list.value = list.value.concat(curPageData);
		mescroll.endSuccess(curPageLen);
	}
	
	const resetScroll = ()=>{
		list.value = [];
		downCallback()
	}
	//参与话题
	const takeTopic = () => {
		console.log('click')
		uni.navigateTo({
			url: '/pages/personal/topic/add?id='+curId.value
		})
	}
	//我的话题
	const goTopic = (item) => {
		item.title = detailInfo.value.name
		uni.navigateTo({
			url: `/pages/personal/topic/record?topicStatus=${item.topicStatus}&info=${encodeURIComponent(JSON.stringify(item))}`
		})
	}
	//我的话题中心
	const goCenter = (item) => {
		uni.navigateTo({
			url: `/pages/personal/topic/center?userId=${item.userId}&userName=${item.userName}`
		})
	}
	//点赞
	const getTopicUpvote = async (item) => {
		if(!item.flag || detailInfo.value.topicStatus!=2){
			return
		}
		let userId = uni.getStorageSync('userId')
		let data = {
			userId: userId,
			topicPostId: item.id
		}
		let res = await topicsUpvote(data)
		if(res){
			item.flag = !item.flag
			item.thumbs ++
			detailInfo.value.thumbs ++
			console.log(res)
		}
	}
</script>
<style>
	page{
		height: 100%;
	}
</style>
<style lang="scss" scoped>
.topic-box{
	height: 100%;
	padding-bottom: 40rpx;
	background: #fff;
	.topic-title{
		height: 460rpx;
		padding: 32rpx;
		box-sizing: border-box;
	}
	.topic-top-content{
		position: relative;
		.swiper{
			height: 420rpx;
			.swiper-item{
				width: 100%;
				height: 420rpx;
			}
		}
		.numbox{
			position: absolute;
			right: 32rpx;
			top: 280rpx;
			background: rgba(0,0,0,0.3);
			border-radius: 200rpx;
			color: #fff;
			padding: 0 20rpx;
			line-height: 36rpx;
			font-size: 24rpx;
		}
	}
	.topic-content{
		background: rgba(255, 255, 255, 1);
		padding: 36rpx 0 0;
		position: relative;
		z-index: 9;
		.topic-title-c{
			font-weight: bold;
			display: flex;
			align-items: center;
			padding: 0 44rpx;
			font-size: 32rpx;
			line-height: 44rpx;
			color: #FD9618;
		}
		.topic-title-p{
			color: #C6C6C6;
			font-size: 24rpx;
			padding: 0 40rpx;
		}
		.topic-desc{
			padding: 0 44rpx;
			font-size: 28rpx;
			line-height: 44rpx;
			color: #999;
			margin: 16rpx 0;
			::v-deep img{
				max-width: 100%;
			}
			.short,.long{
				color: #999;
			}
			.yellow{
				margin-left: 10rpx;
				line-height: 44rpx;
				display: inline-block;
			}
		}
		.topic-tab{
			display: flex;
			align-items: center;
			padding: 40rpx 44rpx 0 44rpx;
			border-bottom: 1px solid rgba(229, 229, 229, 1);
			.view{
				padding: 16rpx 34rpx 16rpx 0;
				color: rgba(153, 153, 153, 1);
				font-size: 32rpx;
			}
			.view.active{
				color: rgba(253, 150, 24, 1);
				position: relative;
				&::before{
					content: " ";
					position: absolute;
					left: 50%;
					transform: translateX(-42rpx);
					bottom: 0;
					width: 48rpx;
					border-top: 4rpx solid rgba(253, 150, 24, 1);
				}
			}
		}
		.topic-list{
			padding: 32rpx 44rpx 32rpx 44rpx;
			.topic-list-p{
				display: flex;
				align-items: center;
				.view{
					display: flex;
					flex-direction: column;
				}
				.list-f-1{
					font-size: 28rpx;
					color: rgba(0, 0, 0, 1);
				}
				.list-f-2{
					font-size: 24rpx;
					color: rgba(153, 153, 153, 1);
				}
			}
			.topic-list-desc{
				color: rgba(0, 0, 0, 1);
				font-size: 32rpx;
			}
			.topic-list-person{
				width: 76rpx;
				height: 76rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 32rpx;
			}
			.topic-list-img1{
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
				grid-template-rows: 1fr;
				grid-gap: 20rpx 10rpx;
				.image{
					width: 208rpx;
					height: 208rpx;
				}
			}
			.topic-list-img2{
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
				grid-template-rows: 1fr 1fr;
				grid-gap: 20rpx 10rpx;
				.image{
					width: 208rpx;
					height: 208rpx;
				}
			}
			.topic-list-img3{
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
				grid-template-rows: 1fr 1fr 1fr;
				grid-gap: 20rpx 10rpx;
				.image{
					width: 208rpx;
					height: 208rpx;
				}
			}
		}
	}
}
.takeTopic{
	width: 320rpx;
	height: 76rpx;
	border-radius: 200rpx;
	background: rgba(253, 150, 24, 1);
	box-shadow: 0px 4rpx 8rpx  rgba(0, 0, 0, 0.25);
	color: #fff;
	text-align: center;
	line-height: 76rpx;
	font-size: 32rpx;
	position: fixed;
	bottom: calc(64rpx + env(safe-area-inset-bottom));
	left: 215rpx;
	z-index: 999;
	&.disabled{
		background: #999;
	}
}
.topic-detail{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 18rpx;
	.view{
		color: rgba(153, 153, 153, 1);
	}
	.topic-zan{
		display: flex;
		align-items: center;
	}
	.image{
		width: 32rpx;
		height: 32rpx;
		margin-right: 6rpx;
	}
}
</style>
